<template>
  <div id="app" class="app">
    <div class="head">
      <head-menu></head-menu>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
    <div class="foot" @click="getUserList">
      <status-bar></status-bar>
    </div>
  </div>
</template>

<script>
  import headMenu from '@/pages/header/menu'
  import statusBar from '@/pages/status/bar'
  import {FR_init, FD_init, FT_init} from '@/common/arcface/arcface'
  import {getUserList} from '@/common/db/user'

  export default {
    name: 'arcface',
    created() {
      this.initEngine()
      this.getUserList()
    },
    methods: {
      initEngine() {
        try {
          this.$store.commit('setEngine', ['hFREngine', FR_init()])
          this.$store.commit('setEngine', ['hFDEngine', FD_init()])
          this.$store.commit('setEngine', ['hFTEngine', FT_init()])
          this.$store.commit('updateStatusMsg', '')
        } catch (e) {
          this.$store.commit('updateStatusMsg', `${e}`)
        }
      },
      getUserList() {
        getUserList().then(list => {
          this.$store.commit('setUserList', list)
        }).catch(e => {
          this.$Message.error(`获用户列表出错,${e}`)
        })
      }
    },
    components: {
      headMenu,
      statusBar
    }
  }
</script>

<style scoped lang="stylus">
  .app
    display flex
    flex-flow column
    position absolute
    width 100%
    height 100%
    .main
      flex 1
</style>
